<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: lwx
  Date: 2018/3/25
  Time: 21:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/singles.css">
    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/avalon.js"></script>
    <script src="../js/player.js"></script>
    <script src="../js/comment.js"></script>
    <script>
        var lrcList = [
            <c:forEach items="${lyricsList}" var="l">
                ["${l[0]}","${l[1]}"],
            </c:forEach>
        ];
    </script>
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>
<c:set var="commentBegin" value="1" scope="session"></c:set>
<c:set var="commentEnd" value="5" scope="session"></c:set>
<input type="hidden" id="uName" value="${user.phone}">
<input type="hidden" id="uId" value="${user.uId}">
<!--歌曲部分-->
<!--大歌词-->
<div id="lyricWindow"></div>
<div id="musicContent">
    <div class="music">
        <!--歌词部分-->
        <div id="musicLrc">
            <!--歌曲名-->
            <input id="musicRid" type="hidden" value="${music.musicRid}">
            <p id="lrcName">${music.songName}</p>
            <!--歌曲头部-->
            <div class="info">
                <p class="album">
                    专辑：
                    <span>
                           <a href="javascript:void(0);">${music.album}</a>
                       </span>
                </p>
                <p class="artist">
                    歌手：
                    <span>
                           <a href="javascript:void(0);">${music.artist}</a>
                       </span>
                </p>
                <div class="shareBox">
                    <a href="javascript:void(0);" class="share">分享</a>
                </div>
                <a href="javascript:void(0);" class="comment">评论</a>

            </div>
            <!--歌词部分-->
            <div id="lrcContent">
                <div id="llrcArea">
                    <div id="llrcId">
                       <c:choose>
                           <c:when test="${lyricsList != null}">
                               <c:forEach items="${lyricsList}" var="l" varStatus="st">
                                   <p id="lId${st.index}" class="lrcItem">${l[1]}</p>
                               </c:forEach>
                           </c:when>
                           <c:otherwise>
                               <h4>该歌曲暂时没有歌词信息</h4>
                           </c:otherwise>
                       </c:choose>
                    </div>
                        <%--<!--<div id="barBox">-->--%>
                        <%--<!--<div id="bar"></div>-->--%>
                    <div id="player"></div>
                </div>
            </div>
        </div>
        <!--播放CD部分-->
        <div id="playBox">
            <!--歌手图片-->
            <div class="musicPic">
                <a href="javascript:void(0);">
                    <img class="photoPic" src="${s.sImg}" alt="">
                    <span class="splice"></span>
                </a>
            </div>
            <!--播放器-->
            <div class="play" id="playBtn"></div>
            <div class="playerMid">
                <div id="prograssBar" class="borderRadius">
                    <div id="bufBar" class="borderRadius">
                        <div class="prograssBar borderRadius" id="wp_processBar"></div>
                        <a href="javascript:void(0);" id="processBtn"></a>
                    </div>
                </div>
            </div>
            <p id="playTime">00:00</p>
            <div id="mute"></div>
            <div id="soundBox">
                <div class="soundBox">
                    <div id="soundPro">
                        <div class="soundPro" id="wp_volBar"></div>
                        <a href="javascript:void(0);" id="wp_volBtn"></a>
                    </div>
                </div>
            </div>
            <div class="down">
                <a href="javascript:void(0);">
                    <span class="icon"></span>
                    <span onclick="saveFile('${music.mp3}','a.aac')">免费下载这首歌</span>
                </a>
            </div>
        </div>
    </div>
</div>
<!--评论-->
<div id="musicCon">
    <div id="singleComment">
        <div id="commentArea">
            <p class="title">
                评论
                <span class="num"></span>
            </p>
            <img class="commentCover" src="../image/def60.jpg">
            <!--输入框部分-->
            <div id="message" class="msg">
                <div class="textBox">
                    <textarea id="messageCon" class="msgCon"
                              onfocus="if(!isLogin()){limitTextarea(this,'#message .length');
                              $('#message .msgTips').hide();}" onblur="if($('#messageCon').val().length<=0){$('#message .msgTips').show();}"></textarea>
                    <span class="msgTips">分享你的音乐见解</span>
                </div>
                <a href="javascript:void(0);" id="messageBtn" class="msgBtn" onclick="commitComment('${user.uId}',$('#messageCon').val(),0);">评论</a>
                <span class="word">
                        已输入
                        <span class="length">0</span>
                        个字
                    </span>
            </div>
            <!--精彩评论-->
            <div id="hotComment" class="listBox">
                <h4>精彩评论</h4>
                <div id="recList">
                </div>
            </div>
            <!--最新评论-->
            <div id="newest" class="listBox">
            </div>
        </div>
    </div>
</div>

<%--评论成功提示框--%>
<div id="commentSuccess">
    <span>评论成功！</span>
</div>
<%--删除评论提示框--%>
<div class="popupWindow">
    <div class="popup">
        <div class="titleBox">
            <p>删除评论</p>
            <a href="javascript:void(0);" class="closeDlWindow" onclick="$('.popupWindow').hide();"></a>
        </div>
        <p class="desc">确定要删除评论吗？</p>
        <div class="btnBox">
            <a href="javascript:void(0);" class="confirm">确定</a>
            <a href="javascript:void(0);" class="cancel" onclick="$('.popupWindow').hide();">取消</a>
        </div>
    </div>
</div>

<jsp:include page="footer.jsp"></jsp:include>
</body>
<script>
    var currentSong = {
        "rid":"${music.musicRid}",
        "src":"http://antiserver.kuwo.cn/anti.s?format=aac|mp3&rid=${music.musicRid}&type=convert_url&response=res"
    };
    var audioFn = xidadaAudio({
        song:[],
        autoPlay:true
    });
    audioFn.addSong(currentSong,true);
    //判断当前用户是否登录
    function isLogin() {
        var uName = $("#uName").val().length;
        if(uName <= 0){
            $("#login").show();
            return true;
        }
        return false;
    }

    //显示/隐藏 大歌词
    $(document).bind("keydown",function (event) {
        if(event.keyCode == 76){ //L
            if($("#lyricWindow").is(":hidden")){
                $("#lyricWindow").show();
            }else{
                $("#lyricWindow").hide();
            }
        }
    });

    //下载文件
    function saveFile(data, fileName) {
        var saveLink = document.createElement( 'a');
        saveLink.href = data;
        saveLink.download = fileName;
        saveLink.click();
    }

    //动态添加评论框
    function appendMsgCon(self,cId,uId,uName) {
        if (!isLogin()) {
            var userId = $("#uId").val();
            if (uId == userId) {
                alert("不能回复自己的消息!");
                return
            }
            if ($("#rMessage").length > 0) {
                $("#rMessage").remove();
                $(self).parent().parent().append('<div id="rMessage" class="msg">\n' +
                    '                        <div class="textBox">\n' +
                    '                            <textarea id="rMessageCon" class="scrollBox msgCon" onfocus="limitTextarea(this,\'#rMessage .length\');$(\'#rMessage .msgTips\').hide();"' +
                    'onblur="if($(\'#rMessageCon\').val().length<=0){$(\'#rMessage .msgTips\').show();}"></textarea>\n' +
                    '                        </div><span id="msgTips" class="msgTips"></span>\n' +
                    '                        <a href="javascript:void(0);" id="rMessageBtn" class="msgBtn" onclick="commitComment(' + cId + ',$(\'#rMessageCon\').val(),1);">回复</a>\n' +
                    '                        <span class="word">\n' +
                    '                            已输入 <span class="length">0</span>个字\n' +
                    '                        </span>\n' +
                    '                    </div>');
            } else {
                $(self).parent().parent().append('<div id="rMessage" class="msg">\n' +
                    '                        <div class="textBox">\n' +
                    '                            <textarea id="rMessageCon" class="scrollBox msgCon" onfocus="limitTextarea(this,\'#rMessage .length\');$(\'#rMessage .msgTips\').hide();"' +
                    'onblur="if($(\'#rMessageCon\').val().length<=0){$(\'#rMessage .msgTips\').show();}"></textarea>\n' +
                    '                        </div><span id="msgTips" class="msgTips"></span>\n' +
                    '                        <a href="javascript:void(0);" id="rMessageBtn" class="msgBtn" onclick="commitComment(' + cId + ',$(\'#rMessageCon\').val(),1);">回复</a>\n' +
                    '                        <span class="word">\n' +
                    '                            已输入 <span class="length">0</span>个字\n' +
                    '                        </span>\n' +
                    '                    </div>');
            }

            $("#msgTips").html("回复" + uName + "：");
        }
    }
</script>
</html>
